<template>
  <view class="popBox">
    <u-popup mode="center" border-radius="16" v-model="show" :mask-close-able="false">
      <view class="content">
        <view class="title">{{title}}</view>
        <!-- 地址 -->
        <view v-if="type=='editAdress'" class="editAdress">
          <view class="label">
            <text style="color: #FF2544;">*</text>选择省市区
          </view>
          <view class="dataSelect bg" @click="showareaPopup =true">
            <!-- 	<uni-data-select style="borde:none" v-model="aderssValue" :localdata="range"
							@change="adressChange"></uni-data-select> -->
            <!-- <uni-data-picker :localdata="items" popup-title="选择地址" @change="onchange"></uni-data-picker> -->
            <!-- <u-input @click="showareaPopup =true" v-model="formData.defaultRegionAddress" height="92" placeholder="选择地址" type="text" :border="border" /> -->

            <view class="areaPopup" @click="showareaPopup =true">{{formData.defaultRegionAddress==''?'选择地址':formData.defaultRegionAddress}}</view>
          </view>
          <view class="label ">详细地址</view>
          <view style="border-radius: 16rpx;background-color: #f5f5f5;padding:24rpx">
            <u-input placeholder-style="color: #666666" v-model="formData.address" height="20"  placeholder="输入详细地址" type="textarea" maxlength="30" :border="border" />
          </view>
        </view>
        <!-- 修改密码 -->
        <view v-if="type=='editPassword'||type=='editMobile'" class="editPassword">
          <view class="label">
            手机号
          </view>
          <view class="bg">
            <u-input placeholder-style="color: #666666" v-model="formData.mobile" height="92" placeholder="输入手机号" maxlength="11" type="number" :border="border" />
          </view>
          <view class="label">
            验证码
          </view>
          <view class="bg">
            <u-input placeholder-style="color: #666666" v-model="formData.yzm" height="92" placeholder="输入验证码" type="number" :border="border" />
            <view @click="sendCode" class="sendCode">{{codeBtnTxt}}</view>
          </view>
          <view v-if="type=='editPassword'" class="label">
            新密码
          </view>
          <view v-if="type=='editPassword'" class="bg">

            <u-input placeholder-style="color: #666666" v-model="formData.newPassword" height="92" placeholder="输入新密码" maxlength="16" type="number" :border="border" />
          </view>
        </view>
        <!-- 修改昵称 -->
        <view v-if="type=='editNickName'" class="editNickName">
          <view class="bg">
            <u-input placeholder-style="color: #666666" v-model="formData.nickName" height="92" placeholder="输入昵称" maxlength="10" type="text" :border="border" />
          </view>
        </view>

        <view class="bottom flex-center-between">
          <text @click="$emit('close')" class="cancel">取消</text>
          <text @click="popSubmit" class="submit"> {{type=='editPassword'?'确认修改':'确认'}}</text>
        </view>
      </view>
    </u-popup>

    <u-picker class="" mode="region" v-model="showareaPopup" @confirm="onchange($event)" :defaultRegion="defaultRegion">
    </u-picker>

  </view>
</template>

<script>

import api from '@/api/index.js';
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      num: 60,
      codeBtnTxt: '获取',
      border: false,
      formData: {
        password: '',
        mobile: '',
        yzm: '',
        newPassword: "",
        nickName: '',
        defaultRegionAddress: '',
        address: '',
        province: '',
        city: '',
        county: '',

      },
      show: true,
      aderssValue: '',
      aderssValue2: '',
      items: [{
        text: "一年级",
        value: "1-0",
        children: [{
          text: "1.1班",
          value: "1-1"
        },
        {
          text: "1.2班",
          value: "1-2"
        }
        ]
      },
      {
        text: "二年级",
        value: "2-0"
      },
      {
        text: "三年级",
        value: "3-0"
      }
      ],
      interval: null,
      showareaPopup: false,
      defaultRegion: [],
      defaultRegionAddress: '',
    }
  },
  methods: {
    popSubmit() {

      if (this.type == 'editMobile') {
        this.changemobile()
      } else if (this.type == 'editPassword') {
        this.changePassword()
      } else if (this.type == 'editNickName') {
        this.changeProfile({ nickname: this.formData.nickName })
      } else if (this.type == 'editAdress') {
        if (this.formData.defaultRegionAddress == '') {
          uni.showToast({
            title: '请选择地区',
            icon: 'none'
          });
          return
        }
        this.changeProfile(this.formData)
      }

    },
    onchange(e) {
      this.defaultRegion[0] = e.province.name
      this.defaultRegion[1] = e.city.name
      this.defaultRegion[2] = e.area.name
      this.formData.province = e.province.name
      this.formData.city = e.city.name
      this.formData.county = e.area.name
      this.formData.defaultRegionAddress = e.province.name + '' + e.city.name + '' + e.area.name
    },

    sendCode() {
      if (this.codeBtnTxt != '获取') {
        return;
      };
      if (!uni.$u.test.mobile(this.formData.mobile)) {
        uni.showToast({
          title: '手机号码不正确',
          icon: 'none'
        });
        return
      }
      let event = ''
      if (this.type == 'editMobile') {
        event = 'changemobile'
      } else if (this.type == 'editPassword') {
        event = 'resetpwd'
      }

      api.base.send({
        mobile: this.formData.mobile,
        event: event
      }).then((res) => {
        if (res.code == 1) {
          this.countdown();
        }

      });
    },

    changeProfile(params) {
      api.base.changeProfile(params).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          });
          this.$emit('editChange', this.type, this.formData)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          return
        }
      });
    },
    changemobile() {
      api.base.changemobile({
        mobile: this.formData.mobile,
        captcha: this.formData.yzm
      }).then((res) => {
        if (res.code == 1) {
          uni.showToast({
            title: '修改成功',
            icon: 'none'
          });
          this.$emit('editChange', this.type, this.formData)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          return
        }
      });
    },
    changePassword() {
      api.base.resetpwd({
        type: 'mobile',
        mobile: this.formData.mobile,
        captcha: this.formData.yzm,
        newpassword: this.formData.newPassword,
      }).then(res => {
        if (res.code == 1) {
          uni.showToast({
            title: '修改成功,请重新登录',
            icon: 'none'
          });
          this.$emit('editChange', this.type, this.formData)
        } else {
          uni.showToast({
            title: '验证码或者密码输入有误',
            icon: 'none'
          });
          return
        }
      });
    },

    countdown() {
      if (this.interval) {
        clearTimeout(this.interval);
      }
      if (this.codeBtnTxt === '获取' || this.codeBtnTxt > 1) {
        this.interval = setTimeout(() => {
          if (this.codeBtnTxt === '获取') {
            this.codeBtnTxt = 29;
          } else if (this.codeBtnTxt > 1) {
            this.codeBtnTxt -= 1;
          }
          this.countdown();
        }, 1000);
      } else {
        setTimeout(() => {
          this.codeBtnTxt = '获取'
        }, 1000);
      }
    },
    closeWin() {
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .input-value-border {
  border: none !important;
}
.popBox {
  .content {
    width: 622rpx;
    padding: 48rpx 32rpx;
    background: #ffffff;
    min-height: 400rpx;

    .title {
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #151515;
      line-height: 38rpx;
      text-align: center;
    }

    .bottom {
      margin-top: 48rpx;
      width: 558rpx;

      .cancel {
        width: 263rpx;
        height: 72rpx;
        background: #f5f5f5;
        border-radius: 36rpx 36rpx 36rpx 36rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 72rpx;
        text-align: center;
      }

      .submit {
        width: 263rpx;
        height: 72rpx;
        background: #6d0cf7;
        box-shadow: 4rpx 4rpx 12rpx 2rpx rgba(171, 181, 197, 0.06);
        border-radius: 36rpx 36rpx 36rpx 36rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 72rpx;
        text-align: center;
      }
    }

    .label {
      height: 40rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 33rpx;
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      margin-top: 48rpx;
    }

    .bg {
      position: relative;
      background: #f5f5f5;
      padding-left: 24rpx;
      color: #666666;
	  border-radius: 16rpx;
      .sendCode {
        z-index: 999;
        position: absolute;
        right: 12rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 112rpx;
        height: 68rpx;
        background: #6d0cf7;
        border-radius: 62rpx 62rpx 62rpx 62rpx;
        line-height: 68rpx;
        text-align: center;
        font-size: 32rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
      }
    }

    .editAdress {
      .dataSelect {
        // margin-bottom: 48rpx;
        .areaPopup {
          height: 88rpx;
          background: #f5f5f5;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          //   width: 558rpx;
          color: #666666;
          line-height: 88rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
    }

    .editNickName {
      margin-top: 48rpx;
    }
  }
}
</style>